import React from "react";
import style from './bottom.module.scss'
import { Carousel} from 'antd-mobile';
import '../../../assest/iconfont/icon.css';
import {withRouter} from 'react-router-dom'
import {renderRoutes} from "react-router-config";
class Bottom extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    render() {
        return (
            <div className={style.news}>
                <div className={style.box}>
                    <div className={style.icon}>
                        <span>新书上市提醒</span>
                    </div>
                    <div className={style.msg}>
                        <Carousel
                            vertical
                            dots={false}
                            dragging={false}
                            swiping={false}
                            autoplay
                            infinite
                        >
                            {this.props.newsList.length!==0&&
                                this.props.newsList.map(value=>{
                                    return (
                                        <div className={style.item} key={value.id}>
                                            {value.title}
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    </div>
                </div>
                <div className={style.branchBook}>
                    <div className={style.top}>
                        <p className={style.title}>品牌图书</p>
                        <p className={style.checkAll} onClick={()=>{this.checkAllBook()}}>
                            查看全部
                            <i className="iconfont icon-youjiantou" style={{fontSize:'20px'}}></i>
                        </p>
                    </div>
                    <div className={style.wrapper}>
                        {
                            this.props.bookList.map(value=>{
                                return (
                                    <div className={style.item} key={value.id} onClick={()=>{this.selectItem(value.id)}}>
                                        <img src={value.thumb} alt=""/>
                                        <p>{value.title}</p>
                                        <span>{value.describe}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                {renderRoutes(this.props.route.routes)}
            </div>
        );
    }
    selectItem (id) {
        this.props.history.push({
            pathname:'/home/source',
            state:id
        })
    }
    checkAllBook (){
        this.props.history.push('/home/brandBook')
    }
}
export default withRouter(Bottom)